<template>
  <div>
    <HeaderNav />
    <div class="total">
      <!-- 个人信息 -->
      <div class="user-info">
        <div class="user-detail">
          <span class="avatar">
            <el-avatar size="large" :src="userInfo.avatar" />
            <span class="name">
              <span>{{ userInfo.username }} --- {{ userInfo.phone }}</span>
              <span>图片数：{{ userInfo.num1 }}&nbsp;&nbsp;&nbsp;&nbsp; 收藏夹数：{{
                  userInfo.num2
              }}</span>
            </span>
          </span>
          <span class="sign">
            <div>
              <icon-pencil theme="two-tone" size="0.08rem" :fill="['#333', '#2F88FF']" />
              <span> 个性签名：{{ userInfo.Signature }} </span>
            </div>
            <span class="settings">
              <el-button size="small" :icon="Edit" round color="#5fc5ba" plain @click="$router.push('/user/edit')">
                修改个人信息
              </el-button>
            </span>
          </span>
        </div>
      </div>

      <!-- 分割线 -->
      <div class="separation"></div>

      <!-- 收藏夹 -->
      <div class="favorites">

        <!-- 操作 -->
        <div class="bar">
          <div class="bar-left">
            <span @click="$router.push('/user_center')">收藏夹<span>{{ userInfo.num2 }}</span></span>
            <span>图片<span>{{ userInfo.num1 }}</span></span>
          </div>
          <div class="bar-right">
            <el-button size="small" :icon="FolderAdd" round color="#5fc5ba" plain @click="addFavorite">添加收藏夹</el-button>
            <el-button size="small" :icon="Delete" round color="#5fc5ba" plain @click="deleteFavorite">删除收藏夹</el-button>
            <el-button size="small" :icon="Edit" round color="#5fc5ba" plain @click="editButton">编辑收藏夹</el-button>
          </div>
        </div>
        <!-- 内容 -->
        <div class="content-main">
          <router-view></router-view>
        </div>
      </div>
    </div>

    <!-- 添加收藏夹 dialog -->
    <el-dialog v-model="addDialog.visible" title="命名" width="40%" draggable>
      <FolderSelect :propsOption="{ checkStrictly: true }" />
      <el-input v-model="addParams.name" placeholder="请输入收藏夹名称" clearable autofocus="true" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addDialog.visible = false" round>取消</el-button>
          <el-button type="primary" @click="confirmAdd" round>确定</el-button>
        </span>
      </template>
    </el-dialog>


    <!-- 修改收藏夹 dialog -->
    <el-dialog v-model="editDialog.visible" title="编辑" width="40%" draggable>
      <FolderSelect :propsOption="{ checkStrictly: true }" />
      <el-input v-model="editParams.name" placeholder="重命名" clearable />
      <el-image :src="editDialog.data.url" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialog.visible = false" round>取消</el-button>
          <el-button type="primary" @click="confirmEdit" round>确定</el-button>
        </span>
      </template>
    </el-dialog>


    <!-- 删除收藏夹 dialog -->
    <el-dialog v-model="delDialog.visible" title="警告" width="40%" draggable>
      <FolderSelect :propsOption="propsOption" />
      <span>
        是否删除收藏夹：
        {{ folder.name ? folder.name : "" }}
      </span>
      <p style="font-size: 0.01rem;">提醒：该收藏夹下的所有图片及下属收藏夹都将删除</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="delDialog.visible = false" round>取消</el-button>
          <el-button type="primary" @click="confirmDel" round>确定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch, getCurrentInstance } from "vue";
import { Edit, CirclePlus, FolderAdd, Delete } from "@element-plus/icons-vue";
import { get, post, postObj } from "@/tools/api/api"
import { ElMessage } from 'element-plus'
import HeaderNav from "@/components/common/HeaderNav.vue";
import FolderSelect from "@/components/folder/FolderSelect.vue"
import { chosedFolderType } from "@/components/folder/folder";
import { dialogType } from "@/components/user/type";
import { usePhotoStore } from "@/store/photo";
import { debounce } from "@/hooks/tools";
// 引入仓库
const photoStore = usePhotoStore();
const instance = getCurrentInstance();//创建实例

onMounted(() => {
  photoStore.$patch((state) => {
    state.isSearchTab = false;
  })
  get("userInfo").then((res: any) => {
    if (res.code === 100) {
      let resInfo: UserInfo = res.data
      Object.assign(userInfo, resInfo);
      userInfo.phone = userInfo.phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
      userInfo.avatar = "http://ergou666.shop:8000" + userInfo.avatar
    }
  })
})

/**
 * 接收子组件传值
 */
const folder = ref<chosedFolderType>({
  name: "",
  value: "",
  type: ""
})
// 选中的收藏夹
const getChosedFolder = (chosedFolder: chosedFolderType) => {
  folder.value = chosedFolder
}


// 使用FolderSelect组件传参
const propsOption = {
  checkStrictly: true
}


/**
 * 添加收藏夹
 */

// dialog数据
const addDialog = reactive<dialogType>({
  visible: false,
  data: ''
})
// 请求参数
type addParamsType = {
  type: string,
  name: string,
  belong: string
}
const addParams = reactive<addParamsType>({
  type: "",//S,M,L
  name: '新建收藏夹',
  belong: "-1"
})
// 按钮点击事件
const addFavorite = () => {
  addDialog.visible = true;
  // 修改仓库数据
  photoStore.showAllLevel = false
}
// 确认添加
const confirmAdd = debounce(() => {
  const addSelectFolder = photoStore.currentFolder;
  if (!addSelectFolder?.length) {
    addParams.type = "L";
    addParams.belong = '-1'
  } else {
    if (addSelectFolder.length === 1) addParams.type = "M"
    if (addSelectFolder.length === 2) addParams.type = "S"
    addParams.belong = addSelectFolder[addSelectFolder.length - 1]
  }
  postObj("addFavorite", addParams).then((res: any) => {
    if (res.code === 100) {
      addDialog.visible = false;
      ElMessage.success("收藏夹： " + addParams.name + " 添加成功");
      // 通知组件更新
      instance?.proxy?.$Bus.emit("reloadFolder")
      instance?.proxy?.$Bus.emit("reloadFavorite")
    } else ElMessage.error(res.msg)
  })
});


/**
 * 删除收藏夹
 */
const delDialog = reactive<dialogType>({
  visible: false
})
const deleteFavorite = () => {
  delDialog.visible = true
  // 修改仓库数据
  photoStore.showAllLevel = true
}
// 删除请求的参数
type deladdParamsType = {
  type: string,
  favorite: string
}
const deladdParams = reactive<deladdParamsType>({
  type: "",
  favorite: ""
})
// 确认删除
const confirmDel = () => {
  const deleteSelectFolder = photoStore.currentFolder;
  if (!deleteSelectFolder.length) {
    ElMessage.warning("请选择要删除的收藏夹")
  } else {
    if (deleteSelectFolder.length === 1) deladdParams.type = "L"
    if (deleteSelectFolder.length === 2) deladdParams.type = "M"
    if (deleteSelectFolder.length === 3) deladdParams.type = "S"
    deladdParams.favorite = deleteSelectFolder[deleteSelectFolder.length - 1]
  }
  post('delFavorite', deladdParams).then((res: any) => {
    if (res.code === 100) {
      ElMessage.success("成功删除")
      delDialog.visible = false;
      // 通知子组件更新
      instance?.proxy?.$Bus.emit("reloadFolder")
      instance?.proxy?.$Bus.emit("reloadFavorite")
      photoStore.$patch((state) => {
        state.currentFolder = []
      })
    } else ElMessage.error(res.msg)
  })
}

/**
 * 
 * 修改收藏夹信息
 * 
 */
const editButton = () => {
  editDialog.visible = true
  // 修改仓库数据
  photoStore.showAllLevel = true
}
// dialog数据
const editDialog = reactive<dialogType>({
  visible: false,
  data: {}
})
// 编辑请求参数
type editParamsType = {
  name: string,
  favorite: string,
  file: string
}
const editParams = reactive<editParamsType>({
  name: '',
  favorite: '',
  file: '/static/img/123'
})
// 确认编辑
const confirmEdit = () => {
  if (!editParams.name) {
    ElMessage.warning("收藏夹名称不能为空")
  }
  if (!photoStore.currentFolder.length) {
    ElMessage.warning("请选择要编辑的收藏夹")
  } else {
    editParams.favorite = photoStore.currentFolder[photoStore.currentFolder.length - 1]
  }
  post("editFavorite", editParams).then((res: any) => {
    if (res.code === 100) {
      ElMessage.success("修改成功")
      editDialog.visible = false
    } else ElMessage.error(res.msg)
  })
}


/**
 * 个人信息
 */
type UserInfo = {
  avatar: string,
  mail: string | null,
  phone: string,
  remark: string | null,
  username: string
}
// const userInfo = ref<UserInfo|null>()
const userInfo = reactive({
  avatar:
    "https://img2.woyaogexing.com/2022/07/09/5ad8b0a6962a1989!400x400.jpg",
  username: "UserName",
  Signature: "dasdsfaasdfasdfasdfasdf",
  num1: "134",
  num2: "12",
  num3: "340",
  phone: ""
});


</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;

span {
  cursor: pointer;
  font-weight: bold;
  color: grey;
  font-size: 0.1rem;
}

.total {
  margin-top: $item-height;
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;

  // 个人信息
  .user-info {
    height: $item-height*2;
    width: 100%;

    .user-detail {
      margin-left: 0.4rem;
      padding: 0.2rem;
      width: $item-width*5;
      height: $item-height*6;
      display: flex;
      flex-direction: column;

      .avatar {
        display: flex;
        align-items: center;
        height: 0.2rem;

        .name {
          margin-left: 0.1rem;
          font-size: 0.1rem;
          display: flex;
          flex-direction: column;

          &>span:last-child {
            font-size: 0.07rem;
          }
        }
      }

      .sign {
        margin-top: $item-height*0.4;
        width: 100%;
        display: flex;
        justify-content: space-between;

        span {
          font-size: 0.08rem;
        }
      }
    }
  }

  //分割线
  .separation {
    height: 0.1rem;
    width: 100%;
    box-shadow: 0 0.003rem 0 grey;
  }

  .favorites {
    height: auto;
    width: 100%;

    .content-main {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      margin-left: 0.1rem;
    }

    .bar {
      margin-top: 0.1rem;
      height: 0.3rem;
      width: 100%;

      span {
        font-size: 0.1rem;

        span {
          margin-left: 0.02rem;
          font-size: 0.07rem;
        }
      }

      &-left {
        float: left;
        width: 2rem;
        display: flex;
        justify-content: space-around;
      }

      &-right {
        float: right;
        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
        width: $item-width*5;
      }
    }

    .content {
      height: auto;
      width: 100%;
      display: flex;
      flex-wrap: nowrap;

      .content-left {
        width: $item-width*2;
      }

      .content-right {
        margin-left: $item-width*1.6;
        width: 70%;
        overflow: hidden;
      }
    }
  }
}

@media screen and (max-width:1024px) {
  .total {
    top: $item-height*3;

    .user-info {
      height: $item-height*6;

      .user-detail {
        width: $item-width*6;
        height: $item-height*9;

        .sign {
          margin-top: $item-height;
        }

      }

    }

    .separation {
      height: 0.1rem;
      box-shadow: 0 0.01rem 0 grey;
    }

    .favorites {
      .bar {
        width: 100%;
        height: $item-height*1.4;

        .bar-left {
          span {
            font-size: $a-font-size*1.2;

            span {
              margin-left: $item-width*0.1;
              font-size: $a-font-size;
            }
          }
        }


        .bar-right {
          margin-right: $item-width*0.4;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: $item-width*3;
          height: $item-height*2.8;
        }

      }

    }
  }
}

@media screen and (max-width:600px) {
  .total {
    top: $item-height*5;

    .user-info {
      height: $item-height*10;

      .user-detail {
        width: $item-width*10;
        height: $item-height*14;

        .sign {
          margin-top: $item-height*3;
        }

      }

    }

    .separation {
      height: 0.1rem;
      box-shadow: 0 0.01rem 0 grey;
    }

    .favorites {
      .bar {
        width: 100%;
        height: $item-height*1.4;

        .bar-left {
          width: $item-width*6;

          span {
            font-size: $a-font-size*0.8;

            span {
              margin-left: $item-width*0.1;
              font-size: $a-font-size *0.5;
            }
          }
        }


        .bar-right {
          margin-right: $item-width*0.4;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: $item-width*5;
          height: $item-height*4;
        }

      }

      .content {
        padding: 0.4rem;

      }
    }


  }
}
</style>
